<template>
    <div class="container">
        <Alert>
            属性项信息
            <Divider/>
            <Row>
                <Form :model="formItem" :label-width="100">
                    <FormItem label="属性项名称">
                        <Input style="width: 200px" v-model="formItem.input" placeholder="请输入属性项名称"></Input>
                    </FormItem>
                </Form>
            </Row>
        </Alert>
        <Alert>
            属性值列表
            <Divider/>
            <Form inline>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="addAction">
                        <Icon type="ios-add"/>
                        新增属性值
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row>
            <vxe-toolbar custom></vxe-toolbar>
            <vxe-table
                    border
                    row-key
                    ref="xTable"
                    class="sortable-row-demo"
                    align="center"
                    :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, icon: 'md-clipboard'}"
                    header-align="center"
                    :data="tableData">
                <vxe-table-column width="60">
                    <template>
                        <span class="drag-btn">
                            <i class="vxe-icon--menu"></i>
                        </span>
                    </template>
                    <template v-slot:header>
                        <vxe-tooltip v-model="showHelpTip1" content="按住后可以上下拖动排序！" enterable>
                            <i class="vxe-icon--question" @click="showHelpTip1 = !showHelpTip1"></i>
                        </vxe-tooltip>
                    </template>
                </vxe-table-column>
                <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
                <vxe-table-column field="name" title="属性名称" :edit-render="{name: 'input'}"></vxe-table-column>
                <vxe-table-column field="action" title="操作" width="400">
                    <template v-slot="{row}">
                        <ButtonGroup>
                            <Button type="error" size="small" class="action-btn"
                                    @click="delAction(row)">删除
                            </Button>
                        </ButtonGroup>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </Row>
        <br>
        <Button style="float: right;" class="search-btn" type="primary" @click="saveAction">
            保存
        </Button>
<!--        <Modal style="text-align: center" v-model="modalShow" width="360">-->
<!--            <Input v-model="insertName" placeholder="请输入单位名称" style="margin-top: 20px"/>-->
<!--            <div slot="footer">-->
<!--                <Button type="error" size="large" long :loading="insertLoading" @click="insertAction">保存</Button>-->
<!--            </div>-->
<!--        </Modal>-->
    </div>
</template>

<script>
import {
  // goodsUnitServiceList,
  // goodsUnitServiceInsert,
  // goodsUnitServiceDelete,
  // goodsUnitServiceUpdate,
  propertyNameServiceInsert,
  propertyNameServiceUpdate
} from '@/api/shop'
import Sortable from 'sortablejs'

export default {
  data () {
    return {
      name: '',
      showHelpTip1: false,
      formItem: {
        input: '',
        radio: '1'
      },
      params: {},
      tableData: [
      ],
      tableColumns: [
        {
          title: '单位名称',
          key: 'name',
          tooltip: true,
          width: 300,
          align: 'center'
        }
      ]
    }
  },
  props: {},
  mounted () {
    if (this.$route.params.valueStr) {
      this.params = this.$route.params
      this.formItem.input = this.params.name
      let valueStr = this.params.valueStr.split(',')
      for (let i = 0; i < valueStr.length; i++) {
        this.tableData.push({
          name: valueStr[i]
        })
      }
    }
  },
  computed: {
    company_code () {
      return this.$store.state.user.severUserInfo.data.company_code
    }
  },
  created () {
    // this.tableData = window.MOCK_DATA_LIST.slice(0, 6)
    this.rowDrop()
  },
  beforeDestroy () {
    if (this.sortable) {
      this.sortable.destroy()
    }
  },
  methods: {
    delAction (row) {
      console.log(row)
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].name === row.name) {
          this.tableData.splice(i, 1)
        }
      }
      this.$Message.success({
        content: '删除成功！'
      })
      console.log(this.tableData)
    },
    saveAction () {
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].sort = i + 1
      }
      console.log(this.tableData)
      let data = {
        name: this.formItem.input,
        type: '0',
        sort: '1',
        valueList: this.tableData
      }
      console.log(data)

      if (this.params.id) {
        data.id = this.$route.params.id
        propertyNameServiceUpdate(data).then(ret => {
          let data = ret.data
          if (data.errcode === 0) {
            this.$Message.success({
              content: '保存成功！'
            })
            this.$router.push({
              path: '/shop/specifications'
            })
          } else {
            this.error(data)
          }
        })
      } else {
        propertyNameServiceInsert(data).then(ret => {
          let data = ret.data
          if (data.errcode === 0) {
            this.$Message.success({
              content: '保存成功！'
            })
            if (this.$route.query.returnType === '1') {
              if (this.$route.query.commodityId) {
                this.$router.push({
                  path: '/shop/commodity/info',
                  query: {
                    id: this.$route.query.commodityId
                  }
                })
              } else {
                this.$router.push({
                  path: '/shop/commodity'
                })
              }
            } else {
              this.$router.push({
                path: '/shop/specifications'
              })
            }
          } else {
            this.error(data)
          }
        })
      }
    },
    addAction () {
      if (this.tableData.length < 11) {
        this.tableData.push({
          name: ''
        })
      } else {
        this.$Message.error('最多可添加10个属性值！')
      }
      console.log(',.111')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    rowDrop () {
      this.$nextTick(() => {
        let xTable = this.$refs.xTable
        this.sortable = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
          handle: '.drag-btn',
          onEnd: ({ newIndex, oldIndex }) => {
            let currRow = this.tableData.splice(oldIndex, 1)[0]
            this.tableData.splice(newIndex, 0, currRow)
          }
        })
      })
    }
  }

}
</script>

<style scoped>
    .container {
        padding-bottom: 50px;
    }

    .action-btn {
        margin-right: 5px;
        /*margin-bottom: 5px;*/
    }

    .search-input {
        /*width: 180px;*/
    }

    .search-btn {
        /*width: 100px;*/
    }

    /deep/ .ivu-divider-horizontal {
        margin: 12px 0;
    }

    /deep/ .ivu-form-item {
        margin-bottom: 6px;
    }

    /deep/ .ivu-btn-group .ivu-btn {
        border-radius: 3px !important;
    }
    .sortable-row-demo .drag-btn {
        cursor: move;
        font-size: 12px;
    }
    .sortable-row-demo .vxe-body--row.sortable-ghost,
    .sortable-row-demo .vxe-body--row.sortable-chosen {
        background-color: #dfecfb;
    }

</style>
